<script setup>
    import { computed } from 'vue';
    let props = defineProps(['msg','type'])
    let color = {info:'#3f0',warn:'#f66',error:'#c00'}
    let ys = computed(()=>{
        return {backgroundColor:color[props.type]}
    });
</script>

<template>
    <div class="box" :style="ys">
        {{ msg }}
    </div>
</template>

<style scoped>
    .box{
        display: inline-block;
        padding: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius:5px ;
        opacity: 0.8;
    }
</style>